<template>
  <div class="app-container search-list">
    <table-pagination
        ref="el-search-table"
        :hasBackBtn="true"
        :adaptive="fixOption"
        :columns="columns"
        :fetch="getData"
        :form-options="formOptions"
        :page-sizes="[20, 50, 100]"
        height="300"
        list-field="records"
        method="get"
        page-index-key="page"
        page-size-key="pageSize"
        total-field="totalElements"
        type="remote">
      <template #backBtn>
        <router-link :to="{name: 'design-list'}">
          <el-button plain icon="el-icon-back" size="small" :round="true">
            返回
          </el-button>
        </router-link>
      </template>
      <template #button>
        <el-button icon="el-icon-circle-plus" size="mini" type="primary" @click="handleAdd">创建置顶链接</el-button>
      </template>
      <template slot="topLink" slot-scope="{row}">
       <span>{{linkUrl(row)}}</span>
        <i  class="el-input__icon el-icon-copy-document" @click="handleCopy(linkUrl(row))"></i>
      </template>
      <el-table-column slot="append" label="操作" width="250" fixed="right">
        <template slot-scope="scope">
          <el-button plain size="mini" type="primary" @click="handleEdit(scope.row.id)">编辑</el-button>
          <el-button plain size="mini" type="primary" @click="preview(scope.row)">预览</el-button>
          <el-button plain size="mini" type="danger" @click="deleteDataById(scope.row.id)">删除</el-button>
          <el-button v-if="scope.row.status=='ing'" plain size="mini" type="primary"
                     @click="endCouponCode(scope.row.id)">
            结束
          </el-button>
          <el-button v-if="scope.row.status=='not_start'" plain size="mini" type="danger"
                     @click="deleteCouponCode(scope.row.id)">
            删除
          </el-button>
        </template>
      </el-table-column>
      <template slot="timeRange" slot-scope="scope">
        {{
          scope.row.beginDate|utcFormat('YYYY-MM-DD HH:mm:ss', timeZone)
        }} - <span v-if="scope.row.endDate==undefined">永不过期</span>
        <span v-if="scope.row.endDate!=undefined">
          {{ scope.row.endDate|utcFormat('YYYY-MM-DD HH:mm:ss', timeZone) }}
        </span>
      </template>
      <template slot="rule" slot-scope="scope">
        满{{ scope.row.consumeMoney|currency(currencySymbol) }}减{{ scope.row.reduction|currency(currencySymbol) }}
      </template>
      <template slot="totalCount" slot-scope="scope">
        <span v-if="scope.row.joinCount==undefined">不限</span>
        <span v-if="scope.row.joinCount!=undefined">{{ scope.row.joinCount }}</span>
      </template>
      <template slot="statusText" slot-scope="scope">
        <span v-if="scope.row.status=='not_start'" style="color: rgb(255,153,0)">{{ scope.row.statusText }}</span>
        <span v-if="scope.row.status=='ing'" style="color: rgb(0,128,0)">{{ scope.row.statusText }}</span>
        <span v-if="scope.row.status=='end'" style="color: rgb(153,153,153)">{{ scope.row.statusText }}</span>
        <span v-if="scope.row.status=='pause'" style="color: rgb(255,0,0)">{{ scope.row.statusText }}</span>
      </template>
    </table-pagination>
  </div>
</template>

<script>
import TablePagination from '_c/Tables/table-pagination';
import {getTopGoodPage, deleteTopGood} from '@/api/top-good';
import {mapGetters} from 'vuex';
import {utcFormat} from '@/utils/filters';

export default {
    name: 'top-good-list',
    components: {TablePagination},
    data () {
        return {
            fixOption: {fixedHeader: true},
            pageParams: {
                page: 1,
                pageSize: 20,
                name: '',
                couponCode: '',
                marketingType: '',
                status: ''
            },
            activityState: [
                {
                    value: '',
                    label: '全部'
                },
                {
                    value: 'not_start',
                    label: '未开始'
                }, {
                    value: 'ing',
                    label: '进行中'
                }, {
                    value: 'end',
                    label: '已结束'
                }
            ],
            formOptions: {
                showResetBtn: true,
                showSearchBtn: true,
                inline: false,
                labelWidth: 120,
                submitBtnText: '查询',
                size: 'small',
                resetBtnCallback: () => {
                    this.$refs['el-search-table'].fetchHandler(this.pageParams, false);
                },
                forms: [
                    {prop: 'name', label: '链接名称：', placeholder: '链接名称'}
                ]
            },
            columns: [
                {label: '链接名称', prop: 'name'},
                {label: '系列名称', prop: 'seriesName'},
                {label: 'fbclid', prop: 'keyWords'},
                {label: '置顶链接',
                    prop: 'href',
                    slotName: 'topLink',
                    render: row => {
                        return 'https://' + this.siteInfo.domainName + '/collection/' + (row.seriesName && row.seriesName.replace(/(^\s*)|(\s*$)/g, '').replace(/\s+/g, '-')) + '?id=' + row.seriesId + '&topGoodId=' + row.id;
                        // return row.href.replace('/goods-list', '/collection/' + row.seriesName);
                    }},
                {
                    label: '更新时间',
                    prop: 'updateTime',
                    render: row => {
                        return utcFormat(row.updateDate, 'YYYY-MM-DD HH:mm:ss', this.timeZone);
                    }
                }
            ]
        };
    },
    methods: {
        handleCopy (recordValue) {
            this.$copyText(recordValue).then((e) => {
                this.$message({
                    message: '复制成功',
                    type: 'success'
                });
            });
        },
        linkUrl (row) {
            return 'https://' + this.siteInfo.domainName + '/collection/' + (row.seriesName && row.seriesName.replace(/(^\s*)|(\s*$)/g, '').replace(/\s+/g, '-')) + '?id=' + row.seriesId + '&topGoodId=' + row.id;
        },
        getData (params) {
            params.siteId = this.siteId;
            return new Promise((resolve, reject) => {
                getTopGoodPage(params).then((res) => {
                    resolve(res);
                });
            });
        },
        preview (row) {
            window.open('https://' + this.siteInfo.domainName + '/collection/' + (row.seriesName && row.seriesName.replace(/(^\s*)|(\s*$)/g, '').replace(/\s+/g, '-')) + '?id=' + row.seriesId + '&topGoodId=' + row.id, '_blank');
        },
        handleSearch () {
            this.$refs['el-search-table'].fetchHandler(this.pageParams, false);
        },
        // 新建活动
        handleAdd () {
            this.$router.push({name: 'top-good-add'});
        },
        // 优惠码编辑
        handleEdit (id) {
            this.$router.push({name: 'top-good-edit', params: {id}});
        },
        deleteDataById (id) {
            this.$confirm('此操作将删除数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteTopGood(id).then(res => {
                    if (res.code === '200') {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.$refs['el-search-table'].fetchHandler(this.pageParams, false);
                    }
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消操作'
                });
            });
        }
    },
    computed: {
        ...mapGetters(['timeZone', 'siteList']),
        siteId () {
            return this.$store.state.user.siteId;
        },
        siteInfo () {
            let info = this.siteList.find(res => res.id === Number(this.siteId));
            return info;
        },
        currencySymbol () {
            return this.siteInfo.currencySymbol;
        }
    }
}
;
</script>

<style lang="scss" scoped>
.search-list {
  h4 {
    border-bottom: 1px solid #E8E8E8;
    margin: 0;
    margin-bottom: 10px;
    padding-bottom: 10px;
  }
}
</style>
